import Qt 4.7
import QtQuick 1.0
import QtMobility.location 1.1
import "boris.js" as BorisGlobal


Rectangle {
    id: page
    width: 320
    height: 200
    opacity: 1
    //color: "transparent"
    focus: true

    //![Landmark model]
    LandmarkBoxFilter {
        id: boxFilter
        topLeft: map.toCoordinate(Qt.point(0,0))
        bottomRight: map.toCoordinate(Qt.point(page.width, page.height))
    }
    LandmarkCategoryFilter {
        id: categoryFilter
        category: LandmarkCategory {
            name: "BorisBikes4"
        }
    }
    LandmarkModel {
        id: landmarkModel
        autoUpdate: true
        //importFile: "qrc:///data/mylm.xml"        
        onModelChanged: {
            console.log("Landmark model changed, landmark count: " + count)
            pinpointViewContainer.opacity = 1.0
            //landmarkListView.interactive = true
        }
        filter: boxFilter
        /*
        sortBy: LandmarkModel.NameSort;
        sortOrder: LandmarkModel.AscendingOrder
        limit: 15
        */
    }
    Component {
        id: landmarkListDelegate
        Item {
            //opacity: 1
            width: parent.width
            height: 53
            Column {
                Text { text: landmark.name; font.bold: true; }
                Row {
                    spacing: 20
                    Text { text: "Lat: " + BorisGlobal.formatAngle(landmark.coordinate.latitude) }
                    Text { text: "Lon: " + BorisGlobal.formatAngle(landmark.coordinate.longitude) }
                }
            }
        }
    }
    //![Landmark model]

    //![Category model]
    LandmarkCategoryModel {
        id: landmarkCategoryModel
        autoUpdate: true
        onCategoriesChanged: {
            console.log("Category model changed, category count: " + count)
            for (var index = 0; index < categories.length; index++)  {
                console.log("Index, name:" + index + " , " + categories[index].name);
            }
        }
    }

    Component {
        id: landmarkCategoryListDelegate
        Item {
            width: 200; height: 50
            Text {
                color: "white"; font.bold: true; style: Text.Raised; styleColor: "black"
                id: nameField; text: category.name
            }
        }
    }
    //![Category model]

    Component {
        id: landmarkMapDelegate
        Item {
            width: 50; height: 20
            x: map.toScreenPosition(landmark.coordinate).x
            y: map.toScreenPosition(landmark.coordinate).y
            Image {
                id: landmarkIcon
                source: "qrc:///images/favico.svg"
                height: 20; width: 20
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        console.log("Landmark clicked, setting visible: " + landmark.name)
                        landmarkNameText.visible = true
                    }
                }
            }
            Text {
                id: landmarkNameText
                anchors.top: landmarkIcon.bottom
                text:  landmark.name
                visible: false
            }
        }
    }


    // main list view //

    VisualItemModel {
        id: mainItemModel

        Item {
            width: mainView.width; height: mainView.height
            //anchors.fill: parent
            //x: mainView.x
            opacity: 1
            focus: true
            clip: true

            Map {
                id: map
                plugin : Plugin { name : "nokia" }
                size.width: parent.width
                size.height: parent.height
                zoomLevel: 12
                connectivityMode: Map.OfflineMode
                focus: true

                center: Coordinate {
                    // Greenwich Royal Observatory
                    latitude: 51.477811
                    longitude: -0.001475
                }

                onZoomLevelChanged: {
                    console.log("Zoom changed")
                    updateFilters();
                }

                onCenterChanged: {
                    console.log("Center changed")
                    updateFilters();
                }

                function updateFilters () {
                    // The pixel coordinates used are the map's pixel coordinates, not
                    // the absolute pixel coordinates of the application. Hence e.g. (0,0) is always
                    // the top left point
                    var topLeftCoordinate = map.toCoordinate(Qt.point(0,0))
                    var bottomRightCoordinate = map.toCoordinate(Qt.point(map.size.width, map.size.height))
                    boxFilter.topLeft = topLeftCoordinate;
                    boxFilter.bottomRight = bottomRightCoordinate;
                }
            }

            Item {
                id: pinpointViewContainer
                width: map.width; height: map.height
                anchors.fill: parent
                //x: map.x
                Repeater {
                    id: landmarkPinpointView
                    model: landmarkModel
                    delegate: landmarkMapDelegate
                }
            }

            Keys.onPressed: {
                console.log("MapView key pressed: " + event.key + "; modifiers: " + event.modifiers)
                if (event.key == 105) {
                    map.zoomLevel += 1
                    console.log("+ (" + map.zoomLevel + ")")
                } else if (event.key == 107) {
                    map.zoomLevel -= 1
                    console.log("- (" + map.zoomLevel + ")")
                } else if (event.key == 49) {
                    map.zoomLevel = 12
                    update(activeBorisIndex)
                } else if (event.key == 16777221) {
                    update(activeBorisIndex + 1)
                } else if (event.key == 16777219) {
                    update(activeBorisIndex - 1)
                } else if (event.key == Qt.Key_Left) {
                    if(event.modifiers) {
                        event.accepted = false;
                    } else {
                        map.pan(-10, 0);
                        event.accepted = true;
                    }
                } else if (event.key == Qt.Key_Right) {
                    if(event.modifiers) {
                        event.accepted = false;
                    } else {
                        map.pan(10, 0);
                        event.accepted = true;
                    }
                } else if (event.key == Qt.Key_Up) {
                    console.log("^")
                    map.pan(0, -10)
                } else if (event.key == Qt.Key_Down) {
                    console.log("v")
                    map.pan(0, 10)
                } else if (event.key == Qt.Key_2) {
                    if (map.mapType == Map.StreetMap) {
                        map.mapType = Map.SatelliteMapDay
                    } else if (map.mapType == Map.SatelliteMapDay) {
                        map.mapType = Map.StreetMap
                    }
                }
            }
        }

        ListView {
            id: landmarkListView;
            model: landmarkModel;
            delegate: landmarkListDelegate;
            width: mainView.width; height: mainView.height;
            //anchors.fill: parent
            highlight: Rectangle {
                radius: 3
                color: "lightsteelblue";
            }
            spacing: 2
            opacity: 1
            highlightFollowsCurrentItem: true
            focus: true
        }
    }


    // old main //

    ListView {
        id: mainView
        width:  page.width; height: page.height - positionIndicator.height - 1
        anchors { top: parent.top }
        orientation: ListView.Horizontal
        snapMode: ListView.SnapOneItem;
        flickDeceleration: 400
        clip: true
        opacity: parent.opacity
        //keyNavigationWraps : true
        model: mainItemModel

        Keys.priority: Keys.BeforeItem
        focus: true

        onCurrentIndexChanged : {
            console.log("main index changed: " + currentIndex)// + "; main focus: " + currentItem.activeFocus)
            pinpointViewContainer.visible = (currentIndex == 0)
        }
    }

    SystemPalette { id: sysPalette; colorGroup: SystemPalette.Active }

    Rectangle {
        id: positionIndicator
        width: parent.width; height: 5
        anchors { bottom: parent.bottom }
        color: sysPalette.base // "transparent" //Qt.rgba(0, 39/255, 91/255, 1)
        opacity: 1
        radius: 2

        Row {
            anchors.centerIn: parent
            anchors.verticalCenter: parent.verticalCenter
            spacing: 0

            Repeater {
                model: mainItemModel.count

                Rectangle {
                    width: positionIndicator.width/mainItemModel.count; height: positionIndicator.height
                    radius: positionIndicator.radius
                    color: mainView.currentIndex == index ? sysPalette.dark : positionIndicator.color; // Qt.rgba(0, 158/255, 224/255, 1) : positionIndicator.color;
                }
            }
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
    /*
    states: [
        State {
            name: "BrowseState"
            //PropertyChanges { target: search; focus: false;  }
            PropertyChanges { target: mainView; focus: true; opacity: 1; visible: true }
        },
        State {
            name: "SearchState"
            when: Keys.onCallPressed === true
            PropertyChanges { target: mainView; focus: false; opacity: 0; visible: false }
            //PropertyChanges { target: search; focus: true;  }

        }
    ]
    */

    Component.onCompleted: {
        // mainView.currentIndex = 1;
        console.log("Main loaded. Lnadmarks found: " + landmarkModel.count);
        map.updateFilters();
        //borisListView.forceActiveFocus
    }

    Keys.onPressed: {
        console.log("Main key pressed: " + event.key)
        //root.state = (root.state == "SearchState") ? "BrowseState" : "SearchState"
    }

    //Keys.forwardTo: [landmarkListView]
}
